/* stylelint-disable prettier/prettier */
$panel-container-group: (
  'bg-color': transparent,
);

$panel-container-group-header: (
  'bg-color': transparent,
  'padding': 12px,
  'border-color': getCssVar('color', 'border'),
  'height': 49px,
);

$panel-container-group-caption: (
  'text-color': getCssVar(color, text, 0),
  'font-size': 16px,
  'font-weight': bold,
);

$panel-container-group-content: (
  'bg-color': transparent,
  'padding': getCssVar(spacing, tight),
);

@include b(panel-container-group) {
  @include set-component-css-var('panel-container-group', $panel-container-group);
  @include set-component-css-var('panel-container-group-header', $panel-container-group-header);
  @include set-component-css-var('panel-container-group-caption', $panel-container-group-caption);
  @include set-component-css-var('panel-container-group-content', $panel-container-group-content);
}

@include b(panel-container-group) {
  height: 100%;
  background-color: getCssVar('panel-container-group', 'bg-color');
  border-radius: getCssVar('border-radius', 'base');

  @include e(caption) {
    @include utils-ellipsis;

    font-size: getCssVar('panel-container-group-caption', 'font-size');
    font-weight: getCssVar('panel-container-group-caption', 'font-weight');
    color: getCssVar('panel-container-group-caption', 'text-color');
  }
}

// 折叠相关样式
@include b(panel-container-group-collapse) {
  >.#{bem(panel-container-group-content)} {
    display: block;
  }

  @include when(collapse) {
    >.#{bem(panel-container-group-content)} {
      display: none;
    }
  }
}

@include b(panel-container-group-header) {
  @include flex;

  box-sizing: border-box;
  height: getCssVar('panel-container-group-header', 'height');
  padding: getCssVar('panel-container-group-header', 'padding');
  margin: getCssVar('panel-container-group-header', 'margin');
  border-bottom: 1px solid rgb(229, 229, 229);

  @include e((left, right)) {
    display: inline-block;
    width: 50%;
  }

  @include e(right) {
    text-align: right;
    @include flex(row, flex-end, center);
  }
}

@include b(panel-container-group-content) {
  width: 100%;
  height: 100%;

  >.#{bem('row')} {
    width: 100%;
    height: 100%;
  }
}

.#{bem('panel-container-group', '', 'show-header')} {
  >.#{bem('panel-container-group-content')} {
    height: calc(100% - getCssVar('panel-container-group-header', 'height'));
    padding: getCssVar('panel-container-group-content', 'padding');
    background-color: getCssVar('panel-container-group-content', 'bg-color');
  }
}